<template>
    <el-row :gutter="10">
        <el-col>
            <div class="flexTear">
                <p style="font-weight: bold;font-size: 18px;margin-left: 10px;">近<span>{{ numbers }}</span>年成灾情况趋势</p>
                <span class="ml-20px" style="font-size: 14px;">地震数据统计</span>
                <div style="width: 150px;">
                <el-date-picker  v-model="yearRange" type="yearrange" value-format="YYYY"
                    range-separator="—" start-placeholder="开始年份" end-placeholder="结束年份" :disabled-date="disabledDate"
                    :clearable="false" @change="changeYearData" />
                </div>
            </div>
        </el-col>
        <el-col :span="8">
            <el-card class="cardStyle">
                <el-radio-group v-model="radio1" size="small" class="radioChange">
                  <el-radio-button label="震级" :value="0" />
                  <el-radio-button label="年份" :value="1" />
                </el-radio-group>
                <Line :data="form" title="死亡/失踪情况" yAxisLabel="人" :index="1" v-if="!radio1"/>
                <BarChart :data="form" title="死亡/失踪情况" :xLabel="years" yAxisLabel="人" :index="1" v-else/>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card class="cardStyle">
                <el-radio-group v-model="radio2" size="small" class="radioChange">
                  <el-radio-button label="震级" :value="0" />
                  <el-radio-button label="年份" :value="1" />
                </el-radio-group>
                <Line :data="form" title="受伤情况" yAxisLabel="人" :index="2" v-if="!radio2"/>
                <BarChart :data="form" title="受伤情况" :xLabel="years" yAxisLabel="人" :index="2" v-else />
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card class="cardStyle">
                <el-radio-group v-model="radio3" size="small" class="radioChange">
                  <el-radio-button label="震级" :value="0" />
                  <el-radio-button label="年份" :value="1" />
                </el-radio-group>
                <Line :data="form" title="经济损失情况" yAxisLabel="亿元" :index="3" v-if="!radio3"/>
                <BarChart :data="form" title="经济损失情况" :xLabel="years" yAxisLabel="亿元" :index="3" v-else />
            </el-card>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import {defineExpose} from 'vue'
import request from '@/config/axios'
import BarChart from './BarChart.vue'
import Line from "./line.vue"
const props = defineProps({
    disabledDate: Function
});
const currentYear = new Date().getFullYear();
const beforeYear = new Date().getFullYear() - 4;
// 初始化日期范围
const yearRange = ref<any>([String(beforeYear), String(currentYear)]);
const numbers = ref<number>(5)
// 模拟的柱状图数据
const form = ref<any>({
    "economics": [0,0,121983,0,0],
    "dieData": [0,0,6,0,0],
    "data": ["3.0-4.9","5.0-5.9","6.0-6.9","7.0-7.9","8.0+"],
    "injuredData": [0,0,6,0,0],
    "disappearData": [0,0,0,0,0],
})
watch(
    () => yearRange.value,
    () => {
        numbers.value = yearRange.value[1] - yearRange.value[0]
    }
)
const radio1 = ref(0)
const radio2 = ref(0)
const radio3 = ref(0)
const province = ref('')
const getYearData = () => {
    let data = {
        startTime: yearRange.value[0],
        endTime: yearRange.value[1],
        province:province.value
    }
    request.post({ url: '/largeScreen/disasterSituation', data }).then(res => {
        form.value = res;
    }).catch(error => {

    })
}
// 获取区间年月日
const years = ref([]);
const generateDate = () => {
  const startDate = new Date(yearRange.value[0]);
  const endDate = new Date(yearRange.value[1]);
  let currentDate = new Date(startDate);
  years.value = [];
  while (currentDate <= endDate) {
    years.value.push(currentDate.getFullYear());
    currentDate = new Date(currentDate.getFullYear() + 1, 0, 1); // add one year
  }
};
const changeYearData = () => {
    generateDate()
    getYearData()
    console.log(years.value);
    
}

const updateChart = (name)=>{
   province.value = name;
   changeYearData()
}
onMounted(() => {
    generateDate()
    getYearData()
})
defineExpose({
    yearRange,
    updateChart

})

</script>

<style>
.flexTear {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 10px;
}
.cardStyle{
    position: relative;
  --el-card-border-radius: 8px!important;
  background-color: rgba(0,0,0,0);
  background: linear-gradient(180deg, #DCECFF 0%, rgba(245, 249, 253, 0.6) 12%, rgba(232, 242, 252, 0.6) 100%);
  border-image: linear-gradient(180deg, #ABCCFA 0%, rgba(255, 255, 255, 0) 60%, #FFFFFF 100%) 1;
  border-radius: 8px!important;
}
.radioChange{
    z-index: 999;
    position: absolute;
    right: 20px;
    top: 20px;
}
:deep(.el-date-editor){
  margin-left: 5px;
  width: 150px;
  background-color: rgba(0,0,0,0)!important;
  color: #3560F6!important;
  border: 1px solid #3560F6!important;
  .el-range-input,.el-range-separator,.el-range__icon{
    color: #3560F6!important;
  }
}
</style>